<template>
    <div class="updateServiceDiary">
        <mt-header class="change-background">
          <router-link to="/serviceListByHouseNumber" slot="left">
            <mt-button icon="back"></mt-button>
          </router-link>
          <mt-button slot="left">当前房源&nbsp;&nbsp;{{baseForm.contractNo}}</mt-button>
          <router-link to="/serviceListByHouseNumber" slot="right">
            <mt-button >点我重新选择</mt-button>
          </router-link>
        </mt-header>
      <mt-tabbar v-model="active" :class="{'tabPosition':changeBackground}" swipeable>
        <mt-tab-item id="tab-container1">
          <span class="tab-content">修改销售数据</span>
        </mt-tab-item>
        <mt-tab-item id="tab-container2">
          <span class="tab-content">提交动态服务</span>
        </mt-tab-item>
      </mt-tabbar>
      <mt-tab-container v-model="active">
        <mt-tab-container-item id="tab-container1">
          <form id="sellingForm" data-vv-scope="form-1" class="selling-form" name="sellingForm"  novalidate @submit.stop.prevent="sellingFormSubmit('form-1')" ref="sellingForm"  role="form">
            <div>
              <label for="storeName">挂牌门店 : </label>
              <input type="text" v-validate="'required|numeric|max:4'" id="storeName" name="storeNum" placeholder="挂牌门店" autocomplete="off"  maxlength="4" v-model="sellingForm.storeNum">
              <span v-show="errors.has('form-1.storeNum')" class="help is-danger">{{ errors.first('form-1.storeNum') }}</span>
            </div>
            <div>
              <label for="networkName">网络挂牌 : </label>
              <input type="text" v-validate="'required|numeric|max:4'" id="networkName" name="networkNum" placeholder="网络挂牌" autocomplete="off" maxlength="4" v-model="sellingForm.networkNum">
              <span v-show="errors.has('form-1.networkNum')" class="help is-danger">{{ errors.first('form-1.networkNum') }}</span>
            </div>
            <div>
              <label for="visitName">带看次数 : </label>
              <input type="text" v-validate="'required|numeric|max:4'" id="visitName" name="visitNum" placeholder="带看次数" autocomplete="off" maxlength="4" v-model="sellingForm.visitNum">
              <span v-show="errors.has('form-1.visitNum')" class="help is-danger">{{ errors.first('form-1.visitNum') }}</span>
            </div>
            <div>
              <label for="intentionName">意向客户 : </label>
              <input type="text" v-validate="'required|numeric|max:4'" id="intentionName" name="intentionNum" placeholder="意向客户" autocomplete="off" maxlength="4" v-model="sellingForm.intentionNum">
              <span v-show="errors.has('form-1.intentionNum')" class="help is-danger">{{ errors.first('form-1.intentionNum') }}</span>
            </div>
            <button class="submit" type="submit" :class="flag?'act-ago':'act-yet'">提交</button>
          </form>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab-container2">
          <form id="uploadForm" data-vv-scope="form-2" class="upload-form" name="uploadForm" novalidate @submit.stop.prevent="uploadFormSubmit('form-2')"  role="form" ref="uploadForm">
            <div class="had-message" v-if="contentCount != 0">该房源已有<span>{{contentCount}}</span>条动态，再接再厉</div>
            <div class="textarea-parent">
              <textarea v-validate="'required'"  name="content" placeholder="对业主说点什么吧..." autocomplete="off" maxlength="300" v-model="uploadForm.content" ></textarea>
              <span v-show="errors.has('form-2.content')" class="help is-danger">{{ errors.first('form-2.content') }}</span>
            </div>
            <UploadImage :houseId = "baseForm.houseId" @uploads-change="uploadsChange"></UploadImage>
            <button class="submit" type="submit" :class="flag2?'act-ago':'act-yet'">提交</button>
          </form>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
</template>

<script>
  import { Validator } from 'vee-validate'
  import { UPDATE_SERVICE_DIARY_PATH, EMPLOYEE_KEY, USER_ID, GET_DETAIL_PORT } from '../../assets/js/config'
  import cache from '../../assets/js/cache'
  import Compare from '../../assets/utils/index'
  import UploadImage from './uploadImage'
  const dictionary = {
    zh_CN: {
      custom: {
        storeNum: {required: '必填', max: '最长四位', numeric: '只允许数字'},
        networkNum: {required: '必填', max: '最长四位', numeric: '只允许数字'},
        visitNum: {required: '必填', max: '最长四位', numeric: '只允许数字'},
        intentionNum: {required: '必填', max: '最长四位', numeric: '只允许数字'},
        content: {required: '必填', max: '最长300位'}
      }
    }
  }
  Validator.updateDictionary(dictionary)
  export default {
    name: 'updateServiceDiary',
    data () {
      return {
        changeBackground: true,
        active: 'tab-container1',
        contentCount: '',
        baseForm: {
          contractNo: '',
          houseId: '',
          token: '',
          userId: ''
        },
        sellingForm: {
          storeNum: '',
          networkNum: '',
          visitNum: '',
          intentionNum: '',
          draftType: '1'
        },
        responeForm: {},
        uploadForm: {
          content: '',
          photo: '',
          draftType: '2'
        },
        getDetailJson: {
          houseId: ''
        },
        flag: false,
        flag2: true
      }
    },
    created () {
      this.baseForm.houseId = this.$route.query.houseId
      this.baseForm.contractNo = this.$route.query.contractNo
      this.contentCount = this.$route.query.contentCount
      let token = cache.get(EMPLOYEE_KEY)
      let userId = cache.get(USER_ID)
      if (token === null || userId === null) {
        cache.del(EMPLOYEE_KEY)
        this.$router.push({ path: '/' })
      }
      this.baseForm.token = token
      this.baseForm.userId = userId
    },
    mounted () {
      let myVue = this
      this.getDetailJson.houseId = this.baseForm.houseId
      this.post({
        url: GET_DETAIL_PORT,
        sendData: this.getDetailJson,
        success (data) {
          myVue.sellingForm = {
            storeNum: data.storeNum,
            networkNum: data.networkNum,
            visitNum: data.visitNum,
            intentionNum: data.intentionNum,
            draftType: '1'
          }
          myVue.responeForm = {
            storeNum: data.storeNum,
            networkNum: data.networkNum,
            visitNum: data.visitNum,
            intentionNum: data.intentionNum,
            draftType: '1'
          }
        }
      })
    },
    watch: {
      'sellingForm': {
        handler: function (val, oldVal) {
          let response = this.responeForm
          let responseResult = Compare(response, val)
          if (responseResult) {
            this.flag = false
          } else {
            this.flag = true
          }
        },
        deep: true
      }
    },
    components: {
      UploadImage
    },
    methods: {
      uploadsChange (val) {
        this.uploadForm.photo = val
      },
      sellingFormSubmit (scope) {
        if (this.flag) {
          this.$validator.validateAll(scope).then((result) => {
            const myVue = this
            if (result) {
              this.flag = false
              this.post({
                url: UPDATE_SERVICE_DIARY_PATH,
                sendData: Object.assign({}, this.sellingForm, this.baseForm),
                success (data) {
                  myVue.$toast({
                    message: '提交成功',
                    duration: 1000
                  })
                  setTimeout(function () {
//                    myVue.$refs.sellingForm.reset()
                    myVue.flag = true
                  }, 2000)
                }
              })
            }
          })
        }
        return false
      },
      uploadFormSubmit (scope) {
        if (this.flag2) {
          this.$validator.validateAll(scope).then((result) => {
            const myVue = this
            if (result) {
              this.flag2 = false
              this.post({
                url: UPDATE_SERVICE_DIARY_PATH,
                sendData: Object.assign({}, this.uploadForm, this.baseForm),
                success (data) {
                  myVue.$toast({
                    message: '提交成功',
                    duration: 1000
                  })
                  setTimeout(function () {
//                    myVue.$refs.uploadForm.reset()
                    myVue.flag2 = true
                    myVue.$router.go(0)
                  }, 2000)
                }
              })
            }
          })
        }
        return false
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.change-background{
  background: #ff5658;
  margin-bottom: 1px;
}
.white{
  color:#fff;
}
  .tabPosition{
    position: relative;
    height:.8rem;
    line-height:.8rem;
  }
.tabPosition > .is-selected{
    background: #ff5658;
    color:#fff;
  }
.tabPosition > .mint-tab-item{
  font-size:.28rem;
}
.tab-content{
  line-height:.5rem;
  font-size:.28rem;
}
  /*表单一样式start*/
.selling-form{
  background: #fff;
  padding:.4rem 0;
}
.selling-form > div {
  width: 50%;
  float: left;
  padding: .2rem 0;
  position: relative;
}
.selling-form > div > input {
  width:55%;
  height: .8rem;
  line-height:.8rem;
  border: 1px solid #dedede;
  text-indent:2px;
  -webkit-border-radius:.1rem;
  -moz-border-radius:.1rem;
  border-radius:.1rem;
}
.selling-form > div > label{
  margin-right:2%;
}
.submit {
  border:0 none;
  width: 80%;
  height: 0.8rem;
  line-height:0.8rem;
  /*background-color: #ff5658;*/
  margin:.6rem auto 0;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  font-size:0.32rem;
  letter-spacing: 6px;
  font-family:'Microsoft YaHei';
  text-align: center;
}
.act-ago {
  color: #fff;
  background-color: #ff5658;
}
.act-yet {
  color: #888;
  background-color: #dedede;
}

.help {
  position: absolute;
  right:8%;
  top:50%;
  -webkit-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  -o-transform: translate(0,-50%);
  transform: translate(0,-50%);
  width:auto;
  font-size:0.24rem;
  color: #ff5658;
}
.explain {
  font-size:0.24rem;
  line-height:0.5rem;
  color: grey;
  margin-top:0.2rem;
}
  /*表单二上传图片*/
.upload-form{
    padding:.2rem .3rem .4rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
    background: #fff;
  }
.upload-form > div {
  text-align: left;
  font-size:.28rem;
  position: relative;
}
.upload-form > div.textarea-parent{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width:100%;
  padding:0 .1rem;
}
.upload-form > div.had-message {
  height:.8rem;
  line-height:.8rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width:100%;
  padding:0 .1rem;

}
.upload-form > div.had-message > span{
  color:#ff5658;
}
.upload-form > div > textarea{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width:100%;
  height:3rem;
  line-height:.4rem;
  resize:none;
  padding:.2rem;
}
.upload-form > div > span.help{
  right:2%;
}
</style>
